<template>
  <div class="card">
    <div class="img-box">
      <img :src="cardObj.image" alt="" @click="large($event)" />
    </div>
    <div class="card-bot">
      <div :class="['choice', isLike ? 'active' : '']" @click="like">
        <svg
          t="1636038599986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5368"
          width="22"
          height="22"
        >
          <path
            d="M772.2 380.3H653.6s17.6-59 26.5-158.6c4.5-50.5-30.9-98.5-82.8-104-3.2-0.5-6.3-0.7-9.5-0.7-42.3 0-79.2 29.2-86.9 70.5 0 0-12.6 64.7-19.1 88-10.8 38.3-48.6 80.7-76 94.3-20.7 10.3-97.5 10.4-102.2 10.4H199.1c-28.8 0-52.1 23.5-52.1 52.7v421.7c0 29.1 23.3 52.7 52.1 52.7h481.2c77.4 0 143.2-57.2 154.7-134.6l40.3-271.4c9.5-63.8-39.3-121-103.1-121zM309.1 852.8H201V444h108.1v408.8z"
            fill="#1afa29"
            p-id="5369"
          ></path>
        </svg>
        <span>点赞({{ cardObj.collectionCount }})</span>
      </div>
      <div class="choice" >
        <svg
          t="1635839318828"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2425"
          width="128"
          height="128"
        >
          <path
            d="M115.256889 882.517333h796.444444V682.666667a28.444444 28.444444 0 1 1 56.888889 0v227.555555c0 1.137778 0 2.161778-0.170666 3.242667a28.444444 28.444444 0 0 1-28.330667 25.941333h-853.333333a28.444444 28.444444 0 0 1-28.330667-31.061333V682.666667a28.444444 28.444444 0 1 1 56.888889 0v199.850666z m429.795555-70.542222c-10.24 3.413333-20.48 3.413333-27.306666 0-3.413333 0-6.826667-3.413333-10.296889-6.826667l-232.504889-232.675555a36.977778 36.977778 0 0 1-10.24-23.893333c0-6.883556 3.413333-17.123556 10.24-24.007112a32.995556 32.995556 0 0 1 47.900444 0L497.208889 699.164444V62.577778c0-20.48 17.066667-34.190222 34.133333-34.190222 20.536889 0 34.247111 13.653333 34.247111 34.190222V699.164444l174.364445-174.535111a32.995556 32.995556 0 0 1 47.843555 0c13.653333 13.653333 13.653333 34.247111 0 47.900445l-232.504889 232.675555c-3.413333 3.413333-6.826667 3.413333-10.24 6.826667z"
            fill="#999999"
            p-id="2426"
          ></path>
        </svg>
        <span>下载</span>
      </div>
      <div class="choice" @click="comment">
        <svg
          t="1635839609552"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="11272"
          width="128"
          height="128"
        >
          <path
            d="M837.837971 15.246271c0 0-34.30411-34.30411-68.60822 0L68.729176 715.746846l-17.85362 17.85362 195.083459 195.131843 0 0 28.594822 28.594822 15.821501 15.821501 34.207343-34.207343-0.048384-0.048384L871.948546 391.478656l0.048384 0.048384 34.207343-34.207343-0.048384-0.048384 102.573644-102.573644c34.30411-34.30411 0-68.60822 0-68.60822L837.837971 15.246271zM290.230187 904.588795l-170.843178-170.843178L666.801258 186.282984l170.843178 170.843178L290.230187 904.588795zM871.851779 322.967203l-170.843178-170.843178 102.573644-102.573644 170.843178 170.843178L871.851779 322.967203z"
            p-id="11273"
          ></path>
          <path
            d="M66.213219 957.762586 102.210762 784.984056 50.29495 733.068244 0.024188 1024 290.326954 973.051865 274.553837 957.327131 246.007399 928.732309Z"
            p-id="11274"
          ></path>
        </svg>
        <span>观点({{ cardObj.opinionCount }})</span>
      </div>
      <div class="choice">
        <svg
          t="1635839465089"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9399"
          width="128"
          height="128"
        >
          <path
            d="M921.76384 892.725248H99.534848V189.059072h434.843648v-40.96H58.574848v785.586176H962.72384V540.893184h-40.96z"
            fill="#2E333A"
            p-id="9400"
          ></path>
          <path
            d="M712.060928 90.820608v40.96h181.069824L366.60224 684.8l29.66528 28.243968L921.76384 161.10592v179.310592h40.96V90.820608z"
            fill="#2E333A"
            p-id="9401"
          ></path>
        </svg>
        <span>分享</span>
      </div>
    </div>
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
      :duration="{ enter: 800, leave: 800 }"
    >
      <div class="mask" :style="`width:${w};height:${h};`" v-if="isShow">
        <img :src="src" alt="" @touchstart="isShow = false" />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "PicCard",
  data() {
    return {
      w: "0px",
      h: "0px",
      src: "",
      isShow: false,
      isLike: false,
      id: "",
    };
  },
  props: {
    cardObj: {
      type: Object,
    },
  },
  methods: {
    large(event) {
      let imgEl = event.target;
      this.w = window.innerWidth + "px";
      this.h = window.innerHeight + "px";
      this.src = imgEl.src;
      this.isShow = true;
    },
    like() {
      this.isLike = !this.isLike;
      localStorage.setItem("isLike", this.isLike);
      if (this.isLike) {
        this.cardObj.collectionCount++;
      } else {
        this.cardObj.collectionCount--;
      }
    },
    comment() {
      let url = `/data/pic-id-${this.cardObj.id}.json`;
      axios
        .get(url)
        .then((res) => {
          let { list } = res.data.resData;
          this.$router.push({
            path: "/comment",
            query: { opinions: list, title: this.cardObj.title },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 20px 0px 0 0;
  background-color: #fff;
  // box-sizing: border-box;
  margin-bottom: 15px;
  .img-box {
    width: 85%;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0px rgb(218, 216, 216),
      -5px -5px 10px 0px rgb(218, 216, 216);
    img {
      width: 100%;
      border-radius: 5px;
      vertical-align: middle;
    }
  }
  .card-bot {
    height: 50px;
    line-height: 50px;
    display: flex;
    border-top: 1px solid #dddcdc;
    .choice {
      flex-grow: 1;
      text-align: center;
      svg {
        width: 19px;
        height: 19px;
        vertical-align: middle;
        margin-right: 3px;
        path {
          fill: #999;
        }
      }
      &.active {
        svg {
          path {
            fill: rgb(84, 175, 133);
          }
        }
      }
      span {
        text-align: center;
        font-size: 14px;
        color: #999;
      }
    }
  }

  // 遮罩层
  .mask {
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
  }
}
</style>